<template>
	<view class="content">
		<!-- 搜索框 -->
		
		<!-- 顶部地址栏 -->
		

		<!-- 顶部导航栏 -->
		<view class="horizonal-tab">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
				<block v-for="(item,index) in tabBars" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index} " @tap="toggleTab(index)">
						{{item.name}}
						<view class="scroll-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- 内容区 -->
		<view class="content">
			<!-- 滑块视图 -->
			<view class="content_view">
				
				<view class="content_view_head">
				<swiper :current="tabIndex" style="height:1500rpx;" @change="tabChange">
					<!-- current:当前所在滑块的index -->					
					
					<swiper-item v-for="(content,index) in contentList" :key="index">
						
						<view class="content_view_head_left">
							养殖户共计：{{content.farmers}}家
						</view>					
						<navigator url="../statistics/county" open-type="navigate">
							<view class="content_view_head_right">
								查看详情>>
							</view>						
							
						</navigator>
						<!-- 数据模块 -->
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left" style="background-color: #83c986;
									  border-radius:18rpx 0 0 18rpx ;"> <p>存栏</p> </view>
								      
								      <view class="content_view_central_li_ul_right">
										  <view class="content_view_central_li_ul_right_li">
											合计: {{content.pig}}头
										  </view>
										  <view class="content_view_central_li_ul_right_li">能繁殖母猪:{{content.Sow}}头</view>
									  </view>
								 </view>								
							</view>							
						</view>
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left" style="background-color: #d9af90;
									   border-radius:18rpx 0 0 18rpx ;"><p>栏舍面积</p></view>
								      
								      <view class="content_view_central_li_ul_right_l">
										  <view class="content_view_central_li_ul_right_l_li">总面积:{{content.house}}亩</view>
										  <view class="content_view_central_li_ul_right_l_li">高架床</view>
										  <view class="content_view_central_li_ul_right_l_li">数量:{{content.upstairsq}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">面积{{content.upstairsa}}亩</view>
									  </view>
									  <view class="content_view_central_li_ul_right_r">
										  <view class="content_view_central_li_ul_right_l_li">传统栏舍:{{content.ohouse}}亩</view>
										  <view class="content_view_central_li_ul_right_l_li">低架床</view>
										  <view class="content_view_central_li_ul_right_l_li">数量:{{content.downstairsq}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">面积:{{content.downstairsa}}亩</view>									  										  
									  </view>
								 </view>								
							</view>							
						</view>
						
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left" style=" background-color: #7aafef;
									   border-radius:18rpx 0 0 18rpx ;"> <p>沼气池</p></view>
								      
									  <view class="content_view_central_li_ul_right">
								       <view class="content_view_central_li_ul_right_le">
										 数量:{{content.biogasq}}家
									   </view>
									   <view class="content_view_central_li_ul_right_ri">
										 面积:{{content.biogasa}}亩										  									  										  
									   </view>
									  </view>
								 </view>								
							</view>							
						</view>
						
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left" style=" background-color: #9f8e61;
									   border-radius:18rpx 0 0 18rpx ;"><p>生态化改造</p> </view>
								      
								      <view class="content_view_central_li_ul_right_l">
										  <view class="content_view_central_li_ul_right_l_li">储液池 数量:{{content.poolq}}家 </view>
										  <view class="content_view_central_li_ul_right_l_li">储粪房 数量:{{content.sfaecesq}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">干粪池: {{content.faecespq}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">改水: {{content.water}}家</view>
									  </view>
									  <view class="content_view_central_li_ul_right_r">
										  <view class="content_view_central_li_ul_right_l_li">面积:{{content.poola}}亩</view>
										  <view class="content_view_central_li_ul_right_l_li">面积:{{content.sfaecesa}}亩</view>
										  <view class="content_view_central_li_ul_right_l_li">使用益生菌:{{content.faecespa}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">完成改造: {{content.waters}}家</view>									  										  
									  </view>
								 </view>								
							</view>							
						</view>
						
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left" 
									  style=" background-color: #aaaaff;
									  color:#FFFFFF ; border-radius:18rpx 0 0 18rpx ;"><p>粪污处理</p> </view>							      
									  
								      <view class="content_view_central_li_ul_l">
										  <view class="content_view_central_li_ul_l_li" >自有土地消纳</view>
										  <view class="content_view_central_li_ul_l_li">2018年1月至统计当月消纳量:{{content.Own}}吨</view>
										  <view class="content_view_central_li_ul_l_li">
											  <view class="content_view_central_li_ul_l_li_">
											  <view>数量:{{content.Owna}}家</view>
											  <view>面积:{{content.Ownr}}亩</view>
											  </view>
											  
										  </view>
										   <br/>
										   
										   <view class="partition" style="width: 90%;height: 3rpx; margin: -35rpx 8% 0 8%;background-color: #646464;"></view>
										  <view class="content_view_central_li_ul_l_li">委托第三方处理</view>
										  <view class="content_view_central_li_ul_l_li">2018年1月至统计当月消纳量:{{content.Others}}吨</view>
										  <view class="content_view_central_li_ul_l_li">
											  <view class="content_view_central_li_ul_l_li_">
											  <view>数量:{{content.Othersa}}家</view>
											  
											  </view>										  											 
										  </view>
										  <br/>
										  
										  <view class="partition" style="width: 90%;height: 2rpx; margin: -35rpx 8% 0 8%;background-color: #646464;"></view>
										  <view class="content_view_central_li_ul_l_li" >直排</view>
										  
										  <view class="content_view_central_li_ul_l_li">
											  <view class="content_view_central_li_ul_l_li_">
											  <view>数量:{{content.Other}}家</view>
											 
											  </view>
										  											 										  											 
										  </view>										  
																		
																					
									  </view>
								 </view>								
							</view>							
						</view>
						
					</swiper-item>					
				</swiper>
				</view>
			</view>
			
			
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				/* 选中标签栏的序列,默认显示第一个 */
				contentList: [ 
				{
					farmers:'200',//养殖户共计多少家
					pig:'200',/*总猪*/
						
					Sow:'1200',/*母猪*/
				
					house:'8000',/*,总栏舍面积*/
					ohouse:'2000',/*传统栏舍面积*/
					upstairsq:'50',/*高架床家数*/
					upstairsa:'3000',/*高架床面积*/
					downstairsq:'50',/*低架床家数*/
					downstairsa:'3000',/*低价床面积*/
				
					biogasq:'300',/*沼气池家数*/
					biogasa:'3000',/*沼气池面积*/
				
					poolq:'100',/*储液池家数*/
					poola:'1000',/*储液池面积*/
					sfaecesq:'100',/*储粪房家数*/
					sfaecesa:'1000',/*储粪房面积*/
					faecespq:'200',/*干粪池家数*/
					faecespa:'1500',/*益生菌*/
					water:'98',/*改水家数*/
					waters:'60',/*改水家数*/
				
					Own:'80',/*自己处理*/
					Owna:'3000',/*自己处理家数*/
					Ownr:'3000',/*自己处理面积*/
					Others:'100',/*第三方处理*/
					Othersa:'100',/*第三方处理家数*/
					Other:'20',/*其他处理*/
				},
				{
					farmers:'1200',//养殖户共计多少家
					pig:'1200',/*总猪*/
						
					Sow:'1120',/*母猪*/
				
					house:'1800',/*,总栏舍面积*/
					ohouse:'1200',/*传统栏舍面积*/
					upstairsq:'150',/*高架床家数*/
					upstairsa:'1300',/*高架床面积*/
					downstairsq:'150',/*低架床家数*/
					downstairsa:'1300',/*低价床面积*/
				
					biogasq:'1300',/*沼气池家数*/
					biogasa:'1300',/*沼气池面积*/
				
					poolq:'1100',/*储液池家数*/
					poola:'1100',/*储液池面积*/
					sfaecesq:'1100',/*储粪房家数*/
					sfaecesa:'1100',/*储粪房面积*/
					faecespq:'1200',/*干粪池家数*/
					faecespa:'1150',/*益生菌*/
					water:'198',/*改水家数*/
					waters:'160',/*改水家数*/
				
					Own:'180',/*自己处理*/
					Owna:'1300',/*自己处理家数*/
					Ownr:'1300',/*自己处理面积*/
					Others:'1100',/*第三方处理*/
					Othersa:'1100',/*第三方处理家数*/
					Other:'120',/*其他处理*/
				},
				{
					farmers:'2200',//养殖户共计多少家
					pig:'2200',/*总猪*/
						
					Sow:'2120',/*母猪*/
				
					house:'2800',/*,总栏舍面积*/
					ohouse:'2200',/*传统栏舍面积*/
					upstairsq:'250',/*高架床家数*/
					upstairsa:'2300',/*高架床面积*/
					downstairsq:'250',/*低架床家数*/
					downstairsa:'2300',/*低价床面积*/
				
					biogasq:'2300',/*沼气池家数*/
					biogasa:'2300',/*沼气池面积*/
				
					poolq:'2100',/*储液池家数*/
					poola:'2100',/*储液池面积*/
					sfaecesq:'2100',/*储粪房家数*/
					sfaecesa:'2100',/*储粪房面积*/
					faecespq:'2200',/*干粪池家数*/
					faecespa:'2100',/*益生菌*/
					water:'298',/*改水家数*/
					waters:'260',/*改水家数*/
				
					Own:'280',/*自己处理*/
					Owna:'2300',/*自己处理家数*/
					Ownr:'2300',/*自己处理面积*/
					Others:'2100',/*第三方处理*/
					Othersa:'2100',/*第三方处理家数*/
					Other:'220',/*其他处理*/
				},
				{
					farmers:'3200',//养殖户共计多少家
					pig:'3200',/*总猪*/
						
					Sow:'3200',/*母猪*/
				
					house:'3000',/*,总栏舍面积*/
					ohouse:'3000',/*传统栏舍面积*/
					upstairsq:'350',/*高架床家数*/
					upstairsa:'3000',/*高架床面积*/
					downstairsq:'350',/*低架床家数*/
					downstairsa:'3000',/*低价床面积*/
				
					biogasq:'300',/*沼气池家数*/
					biogasa:'3000',/*沼气池面积*/
				
					poolq:'3100',/*储液池家数*/
					poola:'3000',/*储液池面积*/
					sfaecesq:'3100',/*储粪房家数*/
					sfaecesa:'3000',/*储粪房面积*/
					faecespq:'3200',/*干粪池家数*/
					faecespa:'3500',/*益生菌*/
					water:'398',/*改水家数*/
					waters:'360',/*改水家数*/
				
					Own:'380',/*自己处理*/
					Owna:'3000',/*自己处理家数*/
					Ownr:'3000',/*自己处理面积*/
					Others:'3100',/*第三方处理*/
					Othersa:'3100',/*第三方处理家数*/
					Other:'320',/*其他处理*/
				},
				{
					farmers:'4200',//养殖户共计多少家
					pig:'4200',/*总猪*/
						
					Sow:'4200',/*母猪*/
				
					house:'4000',/*,总栏舍面积*/
					ohouse:'4000',/*传统栏舍面积*/
					upstairsq:'450',/*高架床家数*/
					upstairsa:'4000',/*高架床面积*/
					downstairsq:'450',/*低架床家数*/
					downstairsa:'4000',/*低价床面积*/
				
					biogasq:'400',/*沼气池家数*/
					biogasa:'4000',/*沼气池面积*/
				
					poolq:'4100',/*储液池家数*/
					poola:'4000',/*储液池面积*/
					sfaecesq:'4100',/*储粪房家数*/
					sfaecesa:'4000',/*储粪房面积*/
					faecespq:'400',/*干粪池家数*/
					faecespa:'4500',/*益生菌*/
					water:'498',/*改水家数*/
					waters:'460',/*改水家数*/
				
					Own:'480',/*自己处理*/
					Owna:'4000',/*自己处理家数*/
					Ownr:'4000',/*自己处理面积*/
					Others:'4100',/*第三方处理*/
					Othersa:'4100',/*第三方处理家数*/
					Other:'420',/*其他处理*/
				},
				{
					farmers:'5200',//养殖户共计多少家
					pig:'5200',/*总猪*/
						
					Sow:'5200',/*母猪*/
				
					house:'5000',/*,总栏舍面积*/
					ohouse:'5000',/*传统栏舍面积*/
					upstairsq:'50',/*高架床家数*/
					upstairsa:'5000',/*高架床面积*/
					downstairsq:'50',/*低架床家数*/
					downstairsa:'5000',/*低价床面积*/
				
					biogasq:'500',/*沼气池家数*/
					biogasa:'5000',/*沼气池面积*/
				
					poolq:'5100',/*储液池家数*/
					poola:'5000',/*储液池面积*/
					sfaecesq:'5100',/*储粪房家数*/
					sfaecesa:'5000',/*储粪房面积*/
					faecespq:'5200',/*干粪池家数*/
					faecespa:'5500',/*益生菌*/
					water:'598',/*改水家数*/
					waters:'560',/*改水家数*/
				
					Own:'580',/*自己处理*/
					Owna:'5000',/*自己处理家数*/
					Ownr:'5000',/*自己处理面积*/
					Others:'5100',/*第三方处理*/
					Othersa:'5100',/*第三方处理家数*/
					Other:'520',/*其他处理*/
				},
				{
					farmers:'6200',//养殖户共计多少家
					pig:'6200',/*总猪*/
						
					Sow:'6200',/*母猪*/
				
					house:'6000',/*,总栏舍面积*/
					ohouse:'6000',/*传统栏舍面积*/
					upstairsq:'650',/*高架床家数*/
					upstairsa:'6000',/*高架床面积*/
					downstairsq:'650',/*低架床家数*/
					downstairsa:'6000',/*低价床面积*/
				
					biogasq:'6300',/*沼气池家数*/
					biogasa:'6000',/*沼气池面积*/
				
					poolq:'6100',/*储液池家数*/
					poola:'6000',/*储液池面积*/
					sfaecesq:'600',/*储粪房家数*/
					sfaecesa:'6000',/*储粪房面积*/
					faecespq:'6200',/*干粪池家数*/
					faecespa:'6500',/*益生菌*/
					water:'698',/*改水家数*/
					waters:'660',/*改水家数*/
				
					Own:'680',/*自己处理*/
					Owna:'6000',/*自己处理家数*/
					Ownr:'6000',/*自己处理面积*/
					Others:'600',/*第三方处理*/
					Othersa:'6100',/*第三方处理家数*/
					Other:'620',/*其他处理*/
				}
				
				],
				city:'玉州',
				county:'东镇',
				town:'东村',
				village:'阿东',
				personal:'养殖场1',
				
				
				
				tabBars: [{
						name: '玉州',
						id: 'yuzhou'
					},
					{
						name: '福绵',
						id: 'fumian'
					},
					{
						name: '北流',
						id: 'beiliu'
					},
					{
						name: '容县',
						id: 'rongxian'
					},
					{
						name: '陆川',
						id: 'luchuan'
					},
					{
						name: '博白',
						id: 'bobai'
					},
					{
						name: '兴业',
						id: 'xingye'
					}
				]
			}
		},
		methods: {
			//切换选项卡
			toggleTab(index) {
				this.tabIndex = index;
			},
			
			//滑动切换swiper
			tabChange(e) {
				console.log(e);
				this.tabIndex = e.detail.current;
			}
			
		}
	}
</script>

<style>
	p{
		margin: 0;
		padding: 0;
	}
	.content {
		width: 100%;
		height: auto;
		
	}
	/*搜索模块*/
	.search  {
		display:flex ;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		margin: 20rpx auto;
		/* background-color: #007AFF; */
	}
	.search_li{
		flex:5;
		border: 2rpx solid #c3c3c3;
		height: 70rpx;
		border-radius: 10rpx;
		margin: 14rpx 40rpx;
		display:flex ;
		/* background-color: #000000; */
	}
	.search_li_size{
		flex: 3;
		font-size: 40rpx;
	    margin-left: 3%;
		color: #c2c2c2;
		
	}
	
	
	
	.content_view {
		width: 90%;
		height: auto;
		margin: 12rpx 5% 12rpx 5%;
	}
	.content_view_head{
		width: 100%;
		height: auto;
		
	}

	.content_view_head_left {
		width: 45%;
		height: auto;
		font-size: 30rpx;
		float: left;
		margin: 0 0 0 20rpx;
		text-align: center;
		border-left: 15rpx solid #4ac997;
		
	}

	.content_view_head_right {
		font-size: 30rpx;
		margin: 0 0 0 75%;
		text-align: center;
		border-radius: 10rpx;
		color: #02a7f0;
	}

	.address {
		display:flex ;
		width: 100%;
		height: auto;
		margin: 8rpx 0 0 5%;
		
	}

	.city {
		font-size: 40rpx;
	}
	.hen{
		font-size: 40rpx;
	}
	.county,.town,.village,.personal{
		font-size: 40rpx;
	}

	.horizonal-tab {
		
	}

	.horizonal-tab .active {
		color: #b8b8b8;
	}

	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		border-bottom: 1rpx solid #eee;
		text-align: center;
		

	}

	.scroll-tab-item {
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 20rpx 30rpx 0 30rpx;
		font-size: 36rpx;
		
	}

	.active .scroll-tab-line {
		border-bottom: 5rpx solid #b8b8b8;
		border-top: 5rpx solid #b8b8b8;
		border-radius: 20rpx;
		width: 70rpx;
	}
	
	
	.content_view_central{
		width: 100%;
		height: auto;
		
		display:flex ;
		flex-direction: column;
	}
	.content_view_central_li{
		width: 90%;
		height: auto;		
		margin: 20rpx 5%;
		border-radius: 18rpx;
		box-shadow: 10rpx 10rpx 10rpx #dcdcdc;
		border: solid #FFFFFF 2rpx;
	}
	.content_view_central_li_ul{
		display:flex ;
		height: auto;
		
		
	}
	.content_view_central_li_ul_left{
		width: 12% ;	
		text-align: center;
		display: flex;
		align-items: auto;
	}
	.content_view_central_li_ul_left>p{
		margin: 20rpx auto;
		writing-mode:tb-rl;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.content_view_central_li_ul_central{
		margin: 15rpx 0;		
		height: auto;
		background-color: #646464;
	}
	.content_view_central_li_ul_right{		
		flex: 1;
		margin: 20rpx 0 20rpx 30rpx;
		display:flex ;
		
	}
	.content_view_central_li_ul_right_li{
		flex: 1;
		font-size: 25rpx;
		display:flex ;
	}
	.content_view_central_li_ul_right_li>view{
		flex: 1;
	}
	.content_view_central_li_ul_right_l{
		margin: 0 auto;
		flex: 1;
	}
	.content_view_central_li_ul_right_r{
		flex: 1;
		margin: 0 auto;
		
	}
	.content_view_central_li_ul_right_le{
		width: 50%;
		margin: 30rpx 0 30rpx 0;
		margin-top: 20rpx;
		font-size: 25rpx;
	}
	.content_view_central_li_ul_right_ri{
		width: 50%;
		margin-top: 20rpx;
		font-size: 25rpx;
	}
	.content_view_central_li_ul_right_l_li{
		flex: 1;
		margin: 0 0 0 20rpx;
		font-size: 25rpx;
	}
	.content_view_central_li_ul_l{
		width: 90%;
		text-align: center;
		
	}
	.content_view_central_li_ul_l_li{
		font-size: 25rpx;
	}
	.content_view_central_li_ul_l_li_{
		text-align: left;
		display: flex;
	}
	.content_view_central_li_ul_l_li_>view{
		flex: 1;
		font-size: 25rpx;
		margin: 0 30rpx;
	}
	


</style>
